import { useEffect } from "react";
import {
  MicroAppProvider,
  useHistory,
  Matcher,
  Match,
  emitGloblState,
  // history,
  Outlet,
} from "@web-design/micro-app";
import qiankun from "@web-design/micro-app/modules/qiankun";
import iframe from "@web-design/micro-app/modules/iframe";
// import webComponents from "@web-design/micro-app/modules/webComponents";
import wujie from "@web-design/micro-app/modules/wujie";
import jdMicroApp from "@web-design/micro-app/modules/jdMicroApp";
import { AppProvider ,DefaultFooter} from "@web-design/ui";
import BaseLayout from "@web-design/layout";
// import "@web-design/layout/theme/1/index.less";
import "@web-design/ui/theme/arco/index.less";
import { AppleOutlined } from "@ant-design/icons";
import './test.less'
import { Spin } from "antd";
// import '@web-design/ui/es/index.less';
const waitTime = (time) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};
function formatMenuData(e) {
  return {
    name: e.name,
    children: e.routes,
    icon: <AppleOutlined  />,
    path: e.path,
  };
}
const MainLayout = () => {
  const history = useHistory();
  useEffect(() => {
    setInterval(() => {
      emitGloblState("mainApp", +new Date());
    }, 1000);
  }, []);

  // useEffect(() => {
  //   if (route.name) {
  //     setActiveKey(route.name)
  //     const item = items.find((v) => v.label == route.name);

  //     if (!item) {
  //       items.push({
  //         label: route.name,
  //         key: route.name,
  //         children: <MicroApp  {...route} />,
  //       });
  //       setItems([...items]);
  //     }
  //   }
  //   console.log({ route });
  //   // const un = history.listen(() => {
  //   //   alert(';as')
  //   // });
  //   // return () => {

  //   //   un();
  //   // };
  // }, [route]);
  // return  <MicroApp  {...route} />
  console.log("Outlet", Outlet);
  return (
    <BaseLayout
      pathname={location.pathname}
      copyright="前端设计体验中心"
      footerRender={() => <DefaultFooter copyright="前端设计中心" icp={[
        {
          title: 'sss',
          href: 'sss'
        }, {
          title: 'sss',
          href: 'sss'
        }
      ]} />}
      siderWidth={200}
      openKeys={['/home']}
      logo="http://static.xyb2b.com/images/fce0d921c0cbac87d5ed28bf3746f596.png"
      navigateTo={(e) => {
        if (e === location.pathname) {
          return;
        }
        history.push(e);
      } }
      title="后台管理系统"
      // fieldNames = {{
      //    name:'name',
      //    path:'path',
      // }}
      formatMenuData={formatMenuData}
      request={() => {
        return new Promise(async (resolve) => {
          await waitTime(1000);
          resolve([
            {
              path: "/home",
              name: "首页",
              routes: [
                {
                  path: "/",
                  name: "首页",
                },
                {
                  path: "/detail",
                  name: "详情页面",
                },
                {
                  path: "/form11",
                  name: "表单页面11",
                },
                {
                  path: "/form22",
                  name: "表单页面22",
                },
                // {
                //   path: "/vue2",
                //   name: "Vue2-app1",
                // },
                // {
                //   path: "/vue3",
                //   name: "Vue3-app2",
                // },
                // {
                //   path: "/react16",
                //   name: "react16",
                // },
                // {
                //   path: "/react17",
                //   name: "react17",
                // },
                // {
                //   path: "/wujie",
                //   name: "wujie",
                // },
                // {
                //   path: "/micro-zoe",
                //   name: "micro-zoe",
                // },
              ]
            },
            {
              path: "/f",
              name: "财务",
              routes: [
                {
                  path: "/micro-zoe",
                  name: "micro-zoe",
                },
              ]
            }
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //     ]
            // },
          ]);
        });
      } } history={undefined}    >
      <Outlet />
      {/* <TabsNav /> */}

      {/* <Tabs activeKey={activeKey} items={items} /> */}
    </BaseLayout>
  );
};

const App = () => {
  return (
    <AppProvider
      fileBasicUrl="https://img.league-test.xyb2b.com/"
      upload={{
        action: "http://api.ocp-test.business.xy/file/uploadFile",
      }}
    >
      <MicroAppProvider
        modules={[qiankun, iframe, wujie, jdMicroApp]}
        spin={<Spin />}
        routes={[
          {
            path: "/",
            title: "首页",
            // loadCss: true,
            entry: "home.js",
          },
          {
            path: "/detail",
            title: "详情",
            // loadCss: true,
            entry: "detail.js",
          },
          {
            path: "/form11",
            title: "表单1",
            // loadCss: true,
            entry: "form.js",
          },
          {
            path: "/form22",
            title: "表单2",

            entry: "form.js",
          },
          {
            path: "/login",

            // loadCss: true,
            entry: "login.js",
            // entry:'https://static.weillan.com/www/biz-test/weillan-saas-account/1.18.0/static/pages/account/login.js?t=1700130717042'
          },
          // {
          //   path: "/vue2/*",
          //   name: "#app1",
          //   title:()=>location.pathname,
          //   entry: "http://localhost:8081/",
          //   container: "#app1",
          //   activeRule: ['/vue2','/vue3'],
          // },
          // {
          //   path: "/vue3/*",
          //   name: "#app2",
          //   title:'vue3',
          //   entry: "http://localhost:8082/",
          //   container: "#app2",
          //   activeRule: ['/vue2','/vue3'],
          // },micro-zoe/
          {
            path: "/react17",
            version: "v17.0.0",
            webComponents: true,
            title: "webComponents",
            entry: "a.react17.js",
          },
          {
            path: "/react16",
            sandbox: true,
            react: "react16",
            title: "webComponents",
            entry: "react16.js",
          },
          {
            path: "/wujie*",
            name: "wujie",
            container: "#wujie",
            wujie: true,
            title: "无界",
            entry: " http://localhost:9002",
          },
          {
            path: "/micro-zoe*",
            name: "micro-zoe",
            container: "#micro-zoe",
            jdMicroApp: true,
            title: "无界",
            entry: " http://localhost:9002",
          },
        ]} name={""}      >
        <Matcher>
          <Match path="*" element={<MainLayout />} />
          <Match path="/login" element={<Outlet />} />
        </Matcher>
      </MicroAppProvider>
    </AppProvider>
  );
};
export default App;
